<template>
    <div class='warning_warp '>
        <div class="table_wrap">
            <el-tabs 
                tab-position="left" 
                class="link_tabs" 
                type="border-card" 
                v-loading="loading" 
                @tab-click="handleTabsEdit"
                element-loading-text="加载中……"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-s-management"></i> ModbusTCP协议</span>
                    <div class="meanTab">
                        1
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-s-management"></i> TCP/IP协议</span>
                    <div class="meanTab">
                        2
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-s-management"></i> HTTP协议</span>
                    <div class="meanTab">
                        3
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-upload"></i> TCP上传</span>
                    <div class="meanTab">
                        4
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-upload"></i> HTTP上传</span>
                    <div class="meanTab">
                        5
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>    
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible:false,
            loading:false,
            setencode:[],
            laWidth:"80px",
            setenadd:{
                code:'',
                limit:"",
                des:""
            }
        }
    },
    created() {
      
        
    },
    computed:{
        
    },
    methods: {
        handleTabsEdit(data){
            if(data.index == 5){
        
            }
        },
       
    },
}
</script>

<style scoped>
/* 联动子项与选项卡样式 */
.warning_warp{
    width: 100%;
    height: 750px;
}
.table_wrap{
    width: 100%;
    height: 100%;
    /* background: #7f94ad; */
}
.link_tabs{
    background: #9bc0db14;
    height: 100%;
    border: 1px solid #45596a;
}
.meanTab{
    font-size: 14px;
}
/deep/ .el-tabs__item{
    height: 60px;
    line-height: 60px;
}
/deep/ .el-tabs--border-card>.el-tabs__header{
    background-color:#0000;
    border-bottom: 1px solid #45596a;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item{
    font-size: 16px;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ffffff;
    background-color: #334b5e;
    border-right-color: #45596a;
    border-left-color: #45596a;
}
/deep/ .el-dialog__body,.el-button{
    color: #fff !important;
}



</style>
